import React from 'react'
import { Dropdown, Button } from 'antd'
import type { MenuProps } from 'antd'
import { useTranslation } from 'react-i18next'
import { setLanguage } from '@/redux/modules/global'
import { RootState, useDispatch, useSelector } from '@/redux'

const App = () => {
  const { language } = useSelector((state: RootState) => state.global)
  const dispatch = useDispatch()
  const { t } = useTranslation()
  const items: MenuProps['items'] = [
    {
      key: 'zh',
      label: <span>{t('chinese')}</span>,
      disabled: language === 'zh'
    },
    {
      key: 'en',
      label: <span>{t('english')}</span>,
      disabled: language === 'en'
    }
  ]
  const onClick: MenuProps['onClick'] = ({ key }) => {
    dispatch(setLanguage(key))
  }
  return (
    <Dropdown menu={{ items, onClick, selectable: true }} placement="bottomLeft" arrow={{ pointAtCenter: true }}>
      <i className="icon-style iconfont icon-yuyanqiehuan" />
    </Dropdown>
  )
}

export default App
